import React, { useEffect, useState, FC } from 'react'
import { useHistory } from 'react-router-dom'
import { Form, Input, Button, message, Tree, Spin } from 'antd'
import { formItemLayout, wrapperCol } from '@/config/layout'
import { closeTabAction, getQuery } from '@/assets/js/publicFunc'
import MySelect from '@/components/common/mySelect'
// import MyUpload from '@/components/common/myUpload'
// const { RangePicker } = DatePicker;
const FormView: FC = () => {
  const query = getQuery()
  const { id } = query

  const [form] = Form.useForm()
  const { setFieldsValue, resetFields } = form

  const [loading, setLoading] = useState<boolean>(false)

  const history: CommonObjectType = useHistory()

  // 编辑状态
  useEffect(() => {
    if (!id) {
      resetFields()
      return
    }
    setFieldsValue({
      name: 'Jacob Jørgensen',
      gender: 'male',
      avatar: 'https://randomuser.me/api/portraits/thumb/men/84.jpg',
      content: 'jacob.jorgensen@example.com',
      status: Math.random() > 0.5
    })
  }, [id, resetFields, setFieldsValue])

  const handleSubmit = () => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      message.success('修改成功')
      const returnUrl = '/user/list'
      closeTabAction(history, returnUrl)
    }, 1000)
  }

  return (
    <Spin spinning={loading}>
      <Form {...formItemLayout} form={form} onFinish={handleSubmit}>
        <Form.Item
          label="租户名称"
          name="name"
          rules={[
            {
              required: true,
              message: '请输入租户名称'
            }
          ]}
        >
          <Input placeholder="请输入租户名称" />
        </Form.Item>
        <Form.Item
          label="租户编码"
          name="code"
          rules={[
            {
              required: true,
              message: '请输入租户编码'
            }
          ]}
        >
          <Input placeholder="请输入租户编码" />
        </Form.Item>
        
        <Form.Item
          label="用户类型"
          name="userType"
        >
          <MySelect
            data={[
              { name: '请选择用户类型', key: '' },
              { name: '平台运营商', key: '1' },
              { name: '企业用户', key: '2' },
              { name: '服务供应商', key: '3' }
            ]}
          />
        </Form.Item>
        <Form.Item
          label="菜单权限"
          name="menu"
        >
          <Tree
            checkable
            defaultExpandedKeys={['0-0-0', '0-0-1']}
            defaultSelectedKeys={['0-0-0', '0-0-1']}
            defaultCheckedKeys={['0-0-0', '0-0-1']}
            treeData={treeData}
          />
        </Form.Item>
        <Form.Item wrapperCol={wrapperCol}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  )
}

export default FormView


const treeData = [
  {
    title: '系统管理',
    key: '0-0',
    children: [
      {
        title: '数据管理',
        key: '0-0-0',
        children: [
          {
            title: '日报管理',
            key: '0-0-0-0',
          },
          {
            title: '月报管理',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: '数据源管理',
        key: '0-0-1',
      },
    ],
  },
];